<template>
<div>
  <view class="canvas-outer">
    <view class="canvas-inner" :style="canvasBg">
      <canvas id="myCanvas" type="2d" style="width:640px;height:480px;"></canvas>
    </view>
  </view>
  <view class="camera" ><u-icon name="camera-fill" /></view>
  <div class="c_title">设备信息</div>
  <u-cell-item  title="设备名称" :arrow="false" value="251424">
    <sapn slot="right-icon"><u-icon name="edit-pen" color="#1B5FEFFF"></u-icon></sapn>
  </u-cell-item>
  <u-cell-item  title="设备序列号" :arrow="false" value="251424"></u-cell-item>


</div>
</template>
<script>
import config from '@/utils/config'
export default {
  name: "index",
  data(){
    return{
      canvasBg:'',
      socketTask:null,
      satus:false,
    }
  },
  onUnload(){
    //关闭socket
    if (this.socketTask&&this.socketTask.readyState<2){
      //0 1
      this.socketTask.close()
    }

  },
  onLoad(page){
    console.log('onLoad',page)
    console.log(config.PARAM.API_WS)
  },
  onShow(){
    console.log('onShow')
    // let self = this
    // this.socketTask = uni.connectSocket({
    //   url: 'ws://121.40.165.18:8800', //仅为示例，并非真实接口地址。
    //   complete: (data)=> {
    //     console.log('data',data)
    //   }
    // });
    // this.socketTask.onOpen(function (res){
    //   self.satus = true
    //   // self.socketTask.send(
    //   //     {no:'1234'}
    //   // )
    //
    // })
    // this.socketTask.onMessage(function (res){
    //   console.log('res',res)
    // })
    // this.socketTask.onClose(function (res){
    //   console.log('onClose',res)
    // })



  },
}
</script>
<style scoped>
.canvas-outer {
  padding: 25px;
  background: #f2f2f2;
  overflow: hidden;
}

.canvas-inner {
  position: relative;
  width: 320px;
  height: 240px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.camera {
  position: absolute;
  top: 250px;
  right: 5px;
  width: 50px;
  height: 50px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 100%;
  color: #fff;
  background: #00000099;
}
.c_title{
  width: 100%;
  height: 45px;
  line-height: 45px;
  background-color: #F9F9FCFF;
  padding-left: 16px;
  color: #8a8a8a;
}
</style>